<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>人力资源-添加培训项目</title>
<script type="text/javascript" src="<%=basePath %>/resource/js/common-css-js.js" charset="UTF-8"></script>
<style>
	body {
		padding: 20px;
	}
</style>
</head>
<body>
	<form class="layui-form">
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训开始时间</label>
	    <div class="layui-input-block">
	      <input id="startDate" type="text" title="开始时间" lay-verify="require|date" name="trainStartDate" placeholder="开始时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训结束时间</label>
	    <div class="layui-input-block">
	      <input id="endDate" type="text" title="结束时间" lay-verify="require|date" name="trainEndDate" placeholder="结束时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训类型</label>
	    <div class="layui-input-block">
	      <input type="text" title="培训类型" name="trainType" lay-verify="require|chineseStr" placeholder="培训类型" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训内容描述</label>
	    <div class="layui-input-block">
	      <input type="text" title="培训内容描述" name="trainDescription" lay-verify="require"  placeholder="培训内容简述" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <input type="hidden" name="trainShouldPeoples">
	  <div class="layui-form-item">
        <div class="layui-form-item">
	    	<label class="layui-form-label">参与员工</label>
	    	<div class="layui-input-block">
		      <input lay-filter="trainList" type="radio" name="trainList" value="allStaff" title="全体员工">
			  <input lay-filter="trainList" type="radio" name="trainList" value="allGirl" title="全体女员工">
			  <input lay-filter="trainList" type="radio" name="trainList" value="allMan" title="全体男员工">
			  <input id="selectStaff" class="layui-btn" type="button" value="自行选择" >
			  <input id="selectStaffReset" class="layui-btn" type="button" value="重置" >
		    </div>
		</div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训地点</label>
	    <div class="layui-input-block">
	      <input type="text" title="培训地点" lay-verify="require" name="trainAddress" placeholder="培训地点" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-btn-group perfect-center">
		  <button id="submit-btn" class="layui-btn" lay-submit lay-filter="submitForm">
		  	提交
		  </button>
		  <button class="layui-btn" type="reset">
		  	清除
		  </button>
	  </div>
	</form>
	<script type="text/javascript">
		//用来存储,选择员工的dom结构
		var selectStaffElement = "";
		//用来存储选中的id号码
		var selectStaffIds = [];
		//存储全体女员工id
		var idsOfWomen = [];
		//存储全体男员工id
		var idsOfMan = [];
		//存储全体员工id
		var idsOfStaff = [];
		//用来记录是否选中了radio
		var flag = false;
		$.ajax({
			type: 'get',
			url: projectPath+"/human-resource/staff-files",
			success: function(msg){
				for(var item_staff = 0;item_staff<msg.length;item_staff++){
					//取出女员工id
					if(msg[item_staff].empSex === "女"){
						idsOfWomen[idsOfWomen.length]=msg[item_staff].empId;
					}else{//取出男员工id
						idsOfMan[idsOfMan.length] = msg[item_staff].empId;
					}
					//添加到全体员工id中
					idsOfStaff[item_staff] = msg[item_staff].empId;
					selectStaffElement+="<label><input name='item_staff' type='checkbox' empId='"+msg[item_staff].empId+"' value='"+msg[item_staff].empName+"'/>"+msg[item_staff].empName+"&nbsp</label>";
				}
			}
		})
	  //执行一个laydate实例
	  laydate.render({
		  elem: '#startDate'
		  ,type: 'datetime'
	  });
	  laydate.render({
		  elem: '#endDate'
		  ,type: 'datetime'
	  });
	  //弹出选择员工窗口
	  $("#selectStaff").click(function(){
		  layer.open({
			  content: selectStaffElement,
			  yes: function(index, layero){//点击确认的时候触发
				var checkboxOfCheckedArray = layero.find("input[name='item_staff']:checked");
				for(var item_checkbox = 0;item_checkbox<checkboxOfCheckedArray.length;item_checkbox++){
					selectStaffIds[item_checkbox] = $(checkboxOfCheckedArray[item_checkbox]).attr("empId");
				}
				//大于0代表有自行选择员工
				if(selectStaffIds.length>0){
					//如果选择了自定义员工则禁用三个按钮
					for(var item_id = 0;item_id<3;item_id++){
						$($("input[name='trainList']")[item_id]).attr("disabled",true);
					}
					form.render('radio');
				}
			    layer.close(index);
			  },//数据回现,窗口弹出的时候触发
		  	  success: function(layero, index){
		  		//判断是否有id值,有则回现数据
		  		if(selectStaffIds.length>0){
		  			for(var item_empId = 0;item_empId<selectStaffIds.length;item_empId++){
		  				var checkedElements = layero.find("input[empId='"+selectStaffIds[item_empId]+"']");
		  				checkedElements.attr("checked",true);
		  			}
		  		}
			  }
		  }); 
			  
			  //重置按钮
			  $("#selectStaffReset").click(function(){
				  for(var item_id = 0;item_id<3;item_id++){
					//取消掉禁止选择
					$($("input[name='trainList']")[item_id]).attr("disabled",false);
				  }
				  selectStaffIds.splice(0,selectStaffIds.length);//清空数组
				  //清空按钮的禁止使用属性样式
				  $("#selectStaff").removeClass("layui-btn-disabled");
				  //清空radio的选中属性
				  $("input[name='trainList']").attr("checked",false);
				  //重新渲染
				  form.render('radio');
			  })
			  //监听radio 取消 选中 操作
			  form.on('radio(trainList)', function(data){
				  //定义了一个标记,默认是false
				  if(flag === true){
					  //为true代表之前有点击过一次,所以就是第二次点击radio
					  flag = false;
					  //第二次点击即为取消,对radio的checked(选中)属性设置为false
					  $(data.elem).attr("checked",false);
					  //删除 自行选着 按钮的 disabled Class属性样式(禁止使用属性)
					  $("#selectStaff").removeClass("layui-btn-disabled");
					  //开启按钮可触发事件操作
					  $("#selectStaff").attr("disabled",false);
					  //重新渲染radio
					  form.render('radio');
					  return;
				  }
				  //第一次点击,给 自行选着 按钮添加 禁止使用的样式Class
				  $("#selectStaff").addClass("layui-btn-disabled");
				//禁止按钮触发窗口事件
				  $("#selectStaff").attr("disabled",true);
				  //设置为true 下次点击即为取消
				  flag = true;
			  });
		});
		//监听提交
		form.on('submit(submitForm)', function(data){
		  //获取到被选中的radio的DOM结构对象
		  var checkedOfRadio =	$("input[name='trainList']:checked");
		  if(checkedOfRadio.length>0){
			//从DOM结构对象中获取到该radio的值
			var tempValue =  checkedOfRadio[0].value;
			switch(tempValue){
				//根据值来判断使用哪一个数组
				case "allMan":
					data.field.trainParticipateEmployee = "allMan";
					data.field.trainShouldPeoples = idsOfMan.length;
					data.field.trainParticipantsId = idsOfMan.join(",");
				  break;
				case "allGirl":
					data.field.trainParticipateEmployee = "allGirl";
					data.field.trainShouldPeoples = idsOfWomen.length;
					data.field.trainParticipantsId = idsOfWomen.join(",");
				  break;
				case "allStaff":
					data.field.trainParticipateEmployee = "allStaff";
					data.field.trainShouldPeoples = idsOfStaff.length;
					data.field.trainParticipantsId = idsOfStaff.join(",");
			}
		  }else{//当radio都没有选着的情况下就使用自行选着的数组
			  data.field.trainParticipateEmployee = "other";
			  data.field.trainShouldPeoples = selectStaffIds.length;
			  data.field.trainParticipantsId = selectStaffIds.join(",");
		  }
		  if(data.field.trainShouldPeoples!==0){
			  //数据筛选好后发送ajax请求
			  $.ajax({
				   type: 'post',
				   url: projectPath+"/human-resource/staff-train",
				   async: false,
				   data:data.field,
				   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
				   beforeSend: function () {
					   layerIndex = layer.load(2);
		           },
				   error: function(XMLHttpRequest, textStatus, errorThrown) {
					   fixedAlert("添加失败!",2);
				   },
			       success: function(msg){
			    	   fixedAlert("添加成功!",1,true);
				   }
		       })
		  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allGirl"){
			  
			  fixedAlert('公司暂时未录入女性员工!',0);
			  
		  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allMan"){
			  
			  fixedAlert('公司暂时未录入男性员工!',0);
			  
		  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allStaff"){
			  
			  fixedAlert('公司暂时未录入员工!',0);
			  
		  }else{
			  fixedAlert('请选择参加的人员!',0);
		  }
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	</script>
</body>
</html>